<template>
  <div>
    <a-table :columns="col" :data-source="adminList" @change="PageChange" :pagination="pageObj">

      <!-- 自定义渲染表格 -->
      <template #bodyCell="{ column,record }">
        <template v-if="column.key==='createAt'">
              {{new Date(record.createAt).toLocaleString()}}
        </template>
        <template v-if="column.key === 'action'">
          <a-button @click="sendRow(record)">编辑</a-button>
          <a-button type="primary" @click="del(record.tokenId)">删除</a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import { delAdmin } from '../../api/admin'
import { ref, reactive, toRefs, defineComponent, watch } from 'vue'
import $bus from '../../utils/mitt'
export default defineComponent({
  name: 'adminTable',
  props: {
    adminList: {
      type: Array
    },
    count: { // 总数据条数
      type: Number,
      default: 0
    }
  },
  setup (props, context) {
    console.log(props)
    // 表头的数据
    const col = [{ name: 'username', title: '用户名', key: 'username', dataIndex: 'userName' },
      { name: 'truename', title: '真实姓名', key: 'truename', dataIndex: 'turename' },
      { name: 'phone', title: '手机号', key: 'phone', dataIndex: 'phone' },
      { name: 'createAt', title: '创建时间', key: 'createAt', dataIndex: 'createAt' },
      { name: 'action', key: 'action', title: '操作' }]
    const pageObj = ref({ })
    const datas = reactive({
      pageObj: {
        total: 0,
        defaultPageSize: 3
      }
    })
    // 监控 props中的count的变化
    watch(() => props.count, (newVal) => {
      console.log(newVal) // 31
      datas.pageObj.total = newVal
    })
    // 页码改变事件
    const PageChange = (page) => {
      console.log(page.current) // 当前页码
      // 子传父 页码
      context.emit('sendpage', page.current)
    }
    // 删除管理员
    const del = async (tokenId) => {
      var res = await delAdmin(tokenId)
      console.log(res)
      context.emit('resetlist')
    }
    // 点击编辑 兄弟传参
    const sendRow = (row) => {
      $bus.emit('sendrow', row)
    }
    return {
      sendRow,
      col,
      del,
      pageObj,
      ...toRefs(datas),
      PageChange
    }
  }
})
</script>

<style>

</style>
